<script setup lang="ts">
import { graphic } from 'echarts/core'
import { computed, onMounted, shallowRef } from 'vue'

import useEcharts, { type EChartsOption } from '~/composables/chart'
import BlockHead from './block-head.vue'

import defaults from './default-chart-option'

import type { OccupationInfo } from '../type'

defineOptions({
  name: 'ItemSix',
})

const props = defineProps<{
  data: OccupationInfo
}>()

const { chartRef, setOption } = useEcharts()

const data = shallowRef<{ name: string, value: string }[]>([])

const option = computed<EChartsOption>(() => {
  return {
    tooltip: {
      ...defaults.tooltip,
      axisPointer: {
        type: 'cross',
      },
    },
    grid: {
      ...defaults.grid,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: { show: false },
      axisTick: { show: false },
      data: data.value.map(item => item.name),
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
    },
    series: [
      {
        type: 'line',
        smooth: false,
        showSymbol: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        z: 1,
        data: data.value.map(item => item.value),
        lineStyle: {
          width: 1,
        },
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(46, 137, 250, 1)' },
            { offset: 1, color: 'rgba(23, 230, 255, 1)' },
          ]),
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(20, 205, 251, 1)' },
            { offset: 1, color: 'rgba(20, 205, 251, 0)' },
          ]),
        },
      },
      {
        type: 'pictorialBar',
        symbol: 'rect',
        itemStyle: {
          color: 'rgba(255,255,255,0.4)',
        },
        data: data.value.map(v => v.value),
        symbolRepeat: true,
        symbolSize: [1, 1],
        symbolMargin: 1,
        z: -10,
        tooltip: { show: false },
      },
    ],
  }
})

onMounted(() => {
  data.value = Object.keys(props.data).map((v) => {
    return {
      name: v,
      value: props.data[v],
    }
  })
  setOption(option.value)
})
</script>

<template>
  <div class="flex flex-col">
    <BlockHead is-big title="核心职位分布" />
    <div class="block-body h-70 w-full flex flex-auto flex-wrap">
      <div ref="chartRef" style="width:100%;height:100%" />
    </div>
  </div>
</template>
